<template>
	<view class="article-list">
		<view class="article-item" v-for="(item,index) in articleItems" :key="index" @tap="onClick(item)">
			<view class="head">
				<view class="head-left">
					<image class="head-icon" :src="item.iconURL" mode=""></image>
					<text>{{item.name}}</text>
				</view>
				<text class="className">{{item.className}}</text>
			</view>
			<view v-if="item.tag" class="tag">
				{{item.tag}}
			</view>
			<view v-if="item.title" class="title">
				{{item.title}}
			</view>
			<view class="content">
				{{item.content}}
			</view>

			<view class="img-top">
				<view v-if="item.imgURL" class="imgOne">
					<image :src="item.imgURL" mode=""></image>
				</view>
				<view v-if="item.imgs.length === 2" class="img2">
					<view v-for="(img, imgIndex) in item.imgs" :key="imgIndex">
						<image :src="img" mode="widthFix"></image>
					</view>
				</view>

				<view v-if="item.imgs.length === 4" class="img4">
					<view class="imgFirst2">
						<image v-for="(img,imgIndex) in item.imgs" :key="imgIndex" :src="img" mode="widthFix"></image>
					</view>
				</view>
			</view>

			<view class="footer">
				<text class="ts">{{item.ts}}</text>
				<view class="footer-left">
					<view class="footer-left-plus">
						<view class="uni-icon uni-icon-chatbubble"></view>
						<text>{{item.pinglun}}</text>
					</view>
					<view class="footer-left-plus">
						<view class="uni-icon uni-icon-star"></view>
						<text>{{item.like}}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :loadingType="loadingType"></uni-load-more>

	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			articleItems: {
				type: Array,
				default () {
					return []
				}
			},
			loadingType: {
				type:Number,
				default:1
			}
		},
		data() {
			return {}
		},
		methods:{
			onClick(item){
				this.$emit("onClickItem",item)
			}
		}
	}
</script>

<style lang="scss">
	.article-list {
		display: flex;
		flex-direction: column;

		.article-item {
			margin: 20upx;
		}

		.head {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 10upx;
		}

		.head-left {
			display: flex;
			flex-direction: row;
		}

		.head-icon {
			width: 32px;
			height: 32px;
			margin-right: 20upx;
		}

		.className {
			color: #999999;
		}

		.tag {
			color: red;
		}

		.title {
			color: #333333;
		}

		.img2 {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.img2 view {
			width: 49%;
			// height: 366upx;
		}

		.img2 image {
			width: 100%;
			height: 100%;
		}

		.img4 {
			display: flex;
			// flex-direction: row;

			flex-wrap: wrap;
			align-content: space-between;
		}

		.imgFirst2 {
			flex-basis: 100%;
			display: flex;
			flex-wrap: wrap;
			line-height: 10px;
			justify-content: space-between;
			margin-bottom: 10upx;
		}

		.imgFirst2 image {
			width: 49.5%;
			margin-top: 5upx;
		}

		.img-top {
			margin-top: 20upx;
		}

		.imgOne image {
			width: 100%;
		}

		.content,
		.ts {
			color: #666666;
			font-size: 26upx;
		}

		.footer {
			margin-top: 10upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.footer-left {
			display: flex;
			flex-direction: row;
			justify-content: center
		}

		.footer-left-plus {
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin-left: 20upx;
			color: #999999;
		}

		.footer-left-plus text {
			font-size: 28upx;
			margin-left: 10upx;
		}
	}
</style>
